<template>
	<view>
		<custom-header title="员工账号管理" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 128rpx - 5rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<!-- 加载中 -->
				<view class="loading_wrap" v-if="listLoading == 'loading'">
					<up-loadmore
						:status="listLoading"
						iconSize="22"
						iconColor="#FF3316"
						loadingIcon='semicircle'
						loadingText=""
						/>
				</view>
				<view
					class="no_data" 
					v-if="!listData.length && listLoading != 'loading'">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
						</view>
				</view>
				<view class="list_wrap" v-else>
					<view class="list" v-for="(item,index) in listData" :key="index">
						<view class="tx_name_phone">
							<view class="tx">
								<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/tx.png" mode=""></image>
							</view>
							<view class="name_phone">
								<view class="name">{{ item.name }}</view>
								<view class="phone">{{ item.phone }}</view>
							</view>
						</view>
						<view 
							class="delete"
							hover-class="confirm_hover"
							:hover-stay-time="200"
							@click="handleDel(item)">
								删除
						</view>
					</view>
				</view>
		</scroll-view>
		<view class="footer_btn_wrap">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn confirm" 
					hover-class="confirm_hover" 
					:hover-stay-time="200" 
					@click="handleAdd">添加员工账号</button>
			</view>
		</view>
	</view>
	<!-- 自定义确认弹出层 -->
	<custom-popup 
		:show="isShowPopup" 
		:config="popupConfig"
		@cancel="handlePopupCancel" 
		@confirm="handlePopupConfirm">
	</custom-popup>
	<!-- 自定义消息弹出层 -->
	<custom-popup
		:show="isShowToast" 
		:config="popupConfig"
		@confirm="isShowToast = false">
	</custom-popup>
</template>

<script setup>
	import { computed, ref, onMounted } from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import supplierApi from '@/api/supplier'


	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	
	// 弹窗提示
	const isShowToast = ref(false)
	const isShowPopup = ref(false)
	const popupConfig  = ref({})
	const handlePopupCancel = (data)=>{
		isShowPopup.value = false
	}

	const params = ref({
		pageNo:1,
		pageSize:10
	})

	const handlePopupConfirm = async (data) => {
		if (!data || !data.id) {
			uni.showToast({
				title: '删除失败：缺少员工信息',
				icon: 'none'
			})
			isShowPopup.value = false
			return
		}

		try {
			await supplierApi.deleteShopUser(data.id);

			isShowPopup.value = false;
			isShowToast.value = true;
			popupConfig.value = { message: `员工"${data.name || '未知'}"删除成功` };
			loadGetListData();
		} catch (error) {
			isShowPopup.value = false;
			isShowToast.value = true;
			popupConfig.value = { message: error.message || '删除失败，请重试' };
		}
};

	
	
	// 获取列表数据
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetListData = async () =>{
		listLoading.value = 'loading'
		const response = await supplierApi.getShopUserPageList(params)
		if(response.records){
		listData.value = response.records
		}else{
			listData.value = []
		}
		listLoading.value = 'loadmore'
	};
	// 删除
	const handleDel = (item)=>{
		console.log('准备删除员工:', item)

		// 数据验证
		if (!item || !item.id) {
			uni.showToast({
				title: '员工信息异常，无法删除',
				icon: 'none'
			})
			return
		}

		popupConfig.value = {
			message: `确定删除员工"${item.name || '未知'}"吗？`,
			showCancel: true,
			data: item  // 保存员工数据
		}
		isShowPopup.value = true
	}
	// 新增
	const handleAdd = ()=>{
		uni.navigateTo({
			url:'/pages/employeeAccountAdd/employeeAccountAdd'
		})
	}
	
	onShow(()=>{
		loadGetListData();
	})

</script>

<style lang="scss">
	.no_data{
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(100% - 40rpx);
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
	.list_wrap{
		padding: 0 20rpx;
		.list{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.tx_name_phone{
				display: flex;
				align-items: center;
				.tx{
					width: 88rpx;
					height: 88rpx;
					border-radius: 100%;
					overflow: hidden;
				}
				.name_phone{
					padding-left: 20rpx;
					.name{
						font-size: 28rpx;
						color: #333;
					}
					.phone{
						font-size: 24rpx;
						color: #999;
						padding-top: 10rpx;
					}
				}
			}
			.delete{
				width: 104rpx;
				text-align: center;
				height: 43rpx;
				line-height: 43rpx;
				border-radius: 84rpx;
				background: #F5564D;
				color: #fff;
				font-size: 24rpx;
			}
		}
	}
</style>
